<template>
  <div>
    <h2 align="center">用户注册</h2>
    <table class="table table-bordered">
      <tr>
        <td>用户名:</td>
        <td>
          <input type="text" v-model="registerData.U_Name" >
        </td>
      </tr>

      <tr>
        <td>密码:</td>
        <td>
          <input type="password" v-model="registerData.U_Pwd" >
        </td>
      </tr>

      <tr>
        <td></td>
        <td>
          <input type="button" value="注册" class="btn btn-success" @click="registerInfo">
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import {reactive,toRefs,onMounted} from 'vue'

import axios from 'axios';

import {useRoute,useRouter} from 'vue-router'

let route = useRoute()
let router = useRouter()

//数据
let data = reactive({
  //注册数据
  registerData:{
    U_Name:'',
    U_Pwd:''
  }
})

//解构
let {registerData} = toRefs(data)

//注册
const registerInfo =()=>{
  //非空判断
  if(registerData.value.U_Name==""){
    return alert('用户名不能为空')
  }
  if(registerData.value.U_Pwd==""){
    return alert('密码不能为空')
  }
  //发送请求
  axios({
    url:'/api/User/UserRegister',
    method:'post',
    data:registerData.value
  }).then(res=>{
    console.log(res);
    if(res.data.data==-1){
      return alert('该用户账号已存在,请重新注册')
    }else if(res.data.data>0){
      alert('注册成功')
      //跳转到登录页面
      router.push('/login')
    }else{
      return alert('注册失败')
    }
  }).catch(err=>{
    console.log(err);
    
  })
}

</script>

<style scoped>

</style>